<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基本信息</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">

    <link href="/static/logistics/gijgo-combined-1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/logistics/css/city-picker.css">
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light" id="basicMessApp">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">

                <div class="row p-2 text-center">
                    <!-- 左边信息导航栏 -->
                    <div th:replace="~{/logistics/leftMess::html}"></div>


                    <div class="col-sm-5 text-center">
                        <figure class="figure">
                            <img class="img-thumbnail" src="/static/admin/images/face/2ee15b18-64a0-42fc-9a4d-0cd3170bfb78.jpeg" width="100" height="100">
                            <figcaption class="figure-caption">
                                <input id='location' type="hidden" class="form-control" onclick="$('#i-file').click();">
                                <label class="input-group-btn">
                                    <input type="button" id="i-check" value="更换头像" class="btn btn-outline-warning" onclick="$('#i-file').click();">
                                </label>
                                <input type="file" name="file" id='i-file'  accept=".xls, .xlsx" onchange="$('#location').val($('#i-file').val());" style="display: none">

                            </figcaption>
                        </figure>

                        <form>
                            <div class="form-group row">
                                <label for="staticEmail" class="col-sm-3 col-form-label">昵称</label>
                                <div class="col-sm-9">
                                    <input type="text" v-model="customer.name" class="form-control" id="staticEmail">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">手机号码</label>
                                <div class="col-sm-9">
                                    <input type="text" v-model="customer.phone"  class="form-control" disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">性别</label>
                                <div class="col-sm-9">
                                    <select id="inputState" v-model="customer.sex" class="form-control">
                                        <option selected value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">注册日期</label>
                                <div class="col-sm-9">
                                    <input class="form-control" th:value="${session.CUSTOMER.regTime}" disabled/>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">所在地区</label>
                                <div class="col-sm-9">

                                    <div class="docs-methods">
                                        <div id="distpicker">
                                            <div class="form-group">
                                                <div style="position: relative;">
                                                    <input id="city-picker3" class="form-control" readonly type="text" value="湖南省/长沙市/雨花区" data-toggle="city-picker">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">详细地址</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" />
                                </div>
                            </div>


                            <div class="form-group row text-center">
                                <label class="col-sm-3 col-form-label"></label>
                                <div class="col-sm-9">
                                    <button type="submit" class="btn btn-warning btn-lg btn-block">提交</button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div class="col-sm-5"></div>

                </div>

            </div>
        </div>
    </div>
</div>


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="/static/logistics/js/city-picker.data.js"></script>
<script src="/static/logistics/js/city-picker.js"></script>
<script src="/static/logistics/js/main.js"></script>
<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script th:inline="javascript">

    new Vue({
        el:'#basicMessApp',
        data:{
            customer:{
                name:[[${session.CUSTOMER.name}]],
                userName:[[${session.CUSTOMER.userName}]],
                phone:[[${session.CUSTOMER.phone}]],
                sex:[[${session.CUSTOMER.sex}]],
                regTime:[[${session.CUSTOMER.regTime}]],
                faceImage:[[${session.CUSTOMER.faceImage}]]
            }
        },
        mounted:function () {


        },

    })

</script>
</body>
</html>
